<template>
    <div class="question-editor">
      <!-- 试题类型切换标签 -->
      <div class="question-type-tabs">
        <el-radio-group v-model="questionType" @change="handleTypeChange">
          <el-radio-button label="single">单选题</el-radio-button>
          <el-radio-button label="multiple">多选题</el-radio-button>
          <el-radio-button label="judge">判断题</el-radio-button>
        </el-radio-group>
      </div>
  
      <!-- 试题题干编辑区 -->
      <div class="question-stem">
        <el-input
          type="textarea"
          :rows="3"
          placeholder="请输入试题题干"
          v-model="questionStem"
        ></el-input>
      </div>
  
      <!-- 选项编辑区（单选题和多选题显示） -->
      <div class="question-options" v-if="showOptions">
        <div class="option-item" v-for="(option, index) in options" :key="index">
          <el-input
            :placeholder="`选项${String.fromCharCode(65 + index)}`"
            v-model="option.text"
            style="width: 90%"
          >
            <template slot="prepend">
              <span>{{ String.fromCharCode(65 + index) }}</span>
            </template>
          </el-input>
          <el-checkbox 
            v-model="option.isCorrect" 
            v-if="questionType === 'multiple'"
            style="margin-left: 10px"
          >正确答案</el-checkbox>
          <el-radio 
            v-model="correctOption" 
            :label="String.fromCharCode(65 + index)"
            v-if="questionType === 'single'"
            style="margin-left: 10px"
          >正确答案</el-radio>
          <el-button
            type="danger"
            icon="el-icon-delete"
            circle
            size="mini"
            @click="removeOption(index)"
            style="margin-left: 10px"
          ></el-button>
        </div>
        <el-button
          type="primary"
          icon="el-icon-plus"
          @click="addOption"
          style="margin-top: 10px"
        >添加选项</el-button>
      </div>
  
      <!-- 判断题选项（判断题显示） -->
      <div class="judge-options" v-if="questionType === 'judge'">
        <el-radio-group v-model="judgeAnswer">
          <el-radio label="true">正确</el-radio>
          <el-radio label="false">错误</el-radio>
        </el-radio-group>
      </div>
  
      <!-- 操作按钮 -->
      <div class="action-buttons">
        <el-button @click="handleCancel">取消</el-button>
        <el-button type="primary" @click="handleSave">保存</el-button>
        <el-button type="success" @click="handleSaveAndAdd">保存并添加下一个</el-button>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    name: 'QuestionEditor',
    data() {
      return {
        questionType: 'single', // 当前试题类型：single/multiple/judge
        questionStem: '',       // 试题题干
        options: [              // 选项数组
          { text: '', isCorrect: false },
          { text: '', isCorrect: false },
          { text: '', isCorrect: false },
          { text: '', isCorrect: false }
        ],
        correctOption: 'A',     // 单选题正确答案
        judgeAnswer: 'true'     // 判断题答案
      }
    },
    computed: {
      // 是否显示选项编辑区
      showOptions() {
        return this.questionType === 'single' || this.questionType === 'multiple'
      }
    },
    methods: {
      // 切换试题类型
      handleTypeChange(type) {
        console.log('切换试题类型:', type)
      },
      // 添加选项
      addOption() {
        if (this.options.length >= 10) {
          this.$message.warning('最多只能添加10个选项')
          return
        }
        this.options.push({ text: '', isCorrect: false })
      },
      // 删除选项
      removeOption(index) {
        if (this.options.length <= 2) {
          this.$message.warning('至少需要2个选项')
          return
        }
        this.options.splice(index, 1)
      },
      // 取消操作
      handleCancel() {
        this.$confirm('确定要取消编辑吗?', '提示', {
          type: 'warning'
        }).then(() => {
          this.$message.info('已取消编辑')
          // 这里可以添加取消后的逻辑，如返回上一页等
        })
      },
      // 保存试题
      handleSave() {
        if (!this.questionStem.trim()) {
          this.$message.warning('请输入试题题干')
          return
        }
        
        const questionData = {
          type: this.questionType,
          stem: this.questionStem
        }
        
        if (this.showOptions) {
          if (this.options.some(opt => !opt.text.trim())) {
            this.$message.warning('请填写所有选项内容')
            return
          }
          
          questionData.options = this.options.map(opt => ({
            text: opt.text,
            isCorrect: this.questionType === 'multiple' ? opt.isCorrect : opt.text === this.correctOption
          }))
        } else {
          questionData.answer = this.judgeAnswer
        }
        
        console.log('保存试题:', questionData)
        this.$message.success('试题保存成功')
      },
      // 保存并添加下一个
      handleSaveAndAdd() {
        this.handleSave()
        // 重置表单
        this.questionStem = ''
        this.options.forEach(opt => {
          opt.text = ''
          opt.isCorrect = false
        })
        this.correctOption = 'A'
        this.judgeAnswer = 'true'
      }
    }
  }
  </script>
  
  <style scoped>
  .question-editor {
    background: #fff;
    padding: 20px;
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }
  
  .question-type-tabs {
    margin-bottom: 20px;
  }
  
  .question-stem {
    margin-bottom: 20px;
  }
  
  .question-options {
    margin-bottom: 20px;
  }
  
  .option-item {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
  }
  
  .judge-options {
    margin-bottom: 20px;
  }
  
  .action-buttons {
    margin-top: 20px;
    text-align: center;
  }
  </style>